<template>
  <div class="template2">
    <el-container>
      <div class="head" id="head1">
        <div class="tit">订单统计
            <el-button type="info" size="mini" @click="serverType('1')" plain :class="tab==1?'act':''" style="margin-left:20px;">小区</el-button>
            <el-button type="info" size="mini" @click="serverType('0')" plain :class="tab==0?'act':''">日期</el-button>
        </div>
        <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline">
          <el-form-item prop="housesName" v-if="tab==1">
            <el-autocomplete size="mini" style="width:200px;" :maxlength='10' class="inline-input" v-model="formInline.housesName" :fetch-suggestions="querySearch" placeholder="小区名称" :trigger-on-focus="false"></el-autocomplete>
          </el-form-item>
          <el-form-item prop="entryTime" v-if="tab==0">
            <el-date-picker size="mini" style="width:200px;" v-model="formInline.entryTime" type="daterange" clearable placeholder="交易时间" value-format="yyyy-MM-dd"  start-placeholder="开始日期"  end-placeholder="结束日期" > </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
            <span @click="resetForm('formInline')" class="reset">
              <i class="icon iconfont icon-icon901"></i> 重置
            </span>
          </el-form-item>
        </el-form>
      </div>
      <el-main style="height:100%">
          <orderCountList v-if="tab==1"></orderCountList>
          <orderCountListDate v-if="tab==0"></orderCountListDate>
      </el-main>
    </el-container>
  </div>
</template>
<script> 
import { request } from "../../assets/request.js";
import orderCountListDate from "./orderCountListDate.vue";
import orderCountList from "./orderCountList.vue";
export default {
  data() {
    return {
      height: 0,
      formInline: {
        housesName: "",
        entryTime:''
      },
      listNum:10,
      tab:1
    };
  },
  created() {
    this.loadAll();
    this.$root.$on("propertBank",data=>{
      this.listNum=data
    })
  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    onSubmit() {   //搜索查询
      
    },
    querySearch(queryString, cb) { //平台用户选择框
      var restaurants = this.restaurants; 
      var len = restaurants.length;
      var arr = [];
      for(var i=0;i<len;i++){
          //如果字符串中不包含目标字符会返回-1
          if(restaurants[i].value.indexOf(queryString)>=0){
              arr.push(restaurants[i]);
          }
      }
      cb(arr);
    },
    loadAll() { //查询所有楼盘
      let url = "houses/all";
      let that=this   //解决this指向问题
      request.ajaxGet({
        url,
        that,
        fn(res){
          for(let i in res){
            res[i].value=res[i].name
          }
          that.restaurants=res
          that.$store.state.property=res
        }
      })
    },
    pedestalList(){
      this.$root.$emit("pedestalList",'no')
    },
    serverType(num){ //tab
        console.log(num)
        this.tab=num
    }
  },
  mounted() {
  },
  components:{
    orderCountList,   //小区统计表
    orderCountListDate, //时间统计表
  },
};
</script>
<style lang="less" scoped>
.act{
    background:#5e6d82;
    color:#ffffff;
}
</style>

<style scoped lang="less">
@import "../template2.less";
</style>